<template>
  <div class="alarm-container">
    <!-- 故障上报和设备被撬的统计卡片 -->
    <div class="alarm-stats">
      <div class="alarm-stat-item error-report" @click="handleAlarmClick('1')">
        <div class="alarm-icon">
          <i class="el-icon-warning"></i>
        </div>
        <div class="alarm-info">
          <div class="alarm-title">上报故障</div>
          <div class="alarm-count">{{ errorReport }}</div>
        </div>
      </div>
      <div class="alarm-stat-item device-tampered" @click="handleAlarmClick('2')">
        <div class="alarm-icon">
          <i class="el-icon-unlock"></i>
        </div>
        <div class="alarm-info">
          <div class="alarm-title">设备被撬</div>
          <div class="alarm-count">{{ smartBQ }}</div>
        </div>
      </div>
    </div>
    
    <!-- 告警分布图表 -->
    <div class="alarm-chart-container">
      <div class="chart-title">告警分布统计</div>
      <div id="alarmChart" class="alarm-chart"></div>
    </div>
    

    
  
  </div>
</template>

<script>
  import * as echarts from "echarts";
  import {
    gaoJinCount
  } from "@/api/lock/menu";
  import {
    listInfo
  } from "@/api/lock/info";
  export default {
    data() {
      return {
        infoCount: {
          waringCount: 0
        },
        errorReport: 0,
        smartBQ: 0,
        // 告警查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          state: "0" // 未处理的告警
        },
        // 统计查询参数
        statsParams: {
          // 如果需要不同的参数用于统计查询，请在这里添加
        },
        alarmList: [],
        // 图表实例
        alarmChart: null
      }
    },
    computed: {
      // 计算总告警数
      totalAlarms() {
        return this.errorReport + this.smartBQ;
      }
    },
    created() {
      this.gaoJinCount();
      this.getInfoCount();
      this.getRecentAlarms();
    },
    mounted() {
      // 在DOM挂载后初始化图表
      this.$nextTick(() => {
        this.initAlarmChart();
      });
    },
    beforeDestroy() {
      // 组件销毁前释放图表实例
      if (this.alarmChart) {
        this.alarmChart.dispose();
        this.alarmChart = null;
      }
    },
    methods: {
      getInfoCount() {
        // 使用listInfo方法获取预警信息列表
        listInfo(this.queryParams).then(response => {
          // 计算总数
          this.infoCount.waringCount = response.total || 0;
        });
      },
      gaoJinCount() {
        gaoJinCount(this.statsParams).then(response => {
          if(response.data){
            this.errorReport = response.data.errorReport || 0;
            this.smartBQ = response.data.smartBQ || 0;
            
            // 成功获取数据后更新图表
            this.updateChartData();
          }
        });
      },
      // 获取最近的告警信息
      getRecentAlarms() {
        listInfo({
          pageNum: 1,
          pageSize: 3,
          state: "0"
        }).then(response => {
          if (response.rows) {
            this.alarmList = response.rows.filter(item => 
              item.waringType === '1' || item.waringType === '2'
            );
          }
        });
      },
      // 初始化图表
      initAlarmChart() {
        // 获取DOM元素
        const chartDom = document.getElementById('alarmChart');
        if (!chartDom) return;
        
        // 初始化echarts实例
        this.alarmChart = echarts.init(chartDom);
        
        // 设置初始配置
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'horizontal',
            bottom: 0,
            data: ['上报故障', '设备被撬']
          },
          series: [
            {
              name: '告警分布',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '18',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: this.errorReport, name: '上报故障', itemStyle: { color: '#ff4d4f' } },
                { value: this.smartBQ, name: '设备被撬', itemStyle: { color: '#ff9c6e' } }
              ]
            }
          ]
        };
        
        // 应用配置
        this.alarmChart.setOption(option);
        
        // 添加窗口大小变化时的自适应
        window.addEventListener('resize', () => {
          this.alarmChart && this.alarmChart.resize();
        });
      },
      // 更新图表数据
      updateChartData() {
        if (!this.alarmChart) return;
        
        // 更新图表数据
        this.alarmChart.setOption({
          series: [{
            data: [
              { value: this.errorReport, name: '上报故障', itemStyle: { color: '#ff4d4f' } },
              { value: this.smartBQ, name: '设备被撬', itemStyle: { color: '#ff9c6e' } }
            ]
          }]
        });
      },
      // 格式化时间
      formatTime(timestamp) {
        if (!timestamp) return '';
        const date = new Date(timestamp);
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hour = date.getHours();
        const minute = date.getMinutes();
        
        return `${month}/${day} ${hour}:${minute < 10 ? '0' + minute : minute}`;
      },
      // 跳转页面
      onclick() {
        this.$router.push({
          path: "tenant",
          query: {
            waringCount: this.infoCount.waringCount,
          }
        });
      },
      // 添加点击处理方法
      handleAlarmClick(type) {
        this.$router.push({
          path: '/waringlist',
          query: {
            waringType: type,
            state: '0'  // 默认显示未处理的告警
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
.alarm-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  
  .alarm-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    
    .alarm-stat-item {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 12px;
      border-radius: 6px;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
      margin: 0 5px;
      transition: all 0.3s;
      
      &:first-child {
        margin-left: 0;
      }
      
      &:last-child {
        margin-right: 0;
      }
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
      }
      
      &.error-report {
        background-color: rgba(255, 77, 79, 0.1);
        border-left: 4px solid #ff4d4f;
        
        .alarm-icon {
          color: #ff4d4f;
        }
      }
      
      &.device-tampered {
        background-color: rgba(255, 156, 110, 0.1);
        border-left: 4px solid #ff9c6e;
        
        .alarm-icon {
          color: #ff9c6e;
        }
      }
      
      .alarm-icon {
        font-size: 24px;
        margin-right: 10px;
      }
      
      .alarm-info {
        .alarm-title {
          font-size: 14px;
          color: #606266;
          margin-bottom: 5px;
        }
        
        .alarm-count {
          font-size: 20px;
          font-weight: bold;
          color: #303133;
        }
      }
    }
  }
  
  .alarm-chart-container {
    margin-bottom: 15px;
    padding: 15px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
    
    .chart-title {
      font-size: 16px;
      color: #303133;
      margin-bottom: 15px;
      font-weight: 500;
    }
    
    .alarm-chart {
      height: 200px;
    }
  }
  
  .alarm-list-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #EBEEF5;
    
    .view-more-btn {
      color: #1890ff;
      font-size: 13px;
      padding: 0;
      
      &:hover {
        color: #40a9ff;
        text-decoration: underline;
      }
      
      i {
        margin-left: 4px;
        font-size: 12px;
      }
    }
  }
  
  .alarm-list {
    flex: 1;
    overflow-y: auto;
    
    &::-webkit-scrollbar {
      width: 4px;
    }
    
    &::-webkit-scrollbar-thumb {
      background-color: rgba(144, 147, 153, 0.3);
      border-radius: 2px;
    }
    
    &::-webkit-scrollbar-track {
      background-color: transparent;
    }
    
    .alarm-list-item {
      display: flex;
      padding: 12px 0;
      border-bottom: 1px solid #EBEEF5;
      transition: all 0.3s;
      
      &:hover {
        background-color: #f5f7fa;
        padding-left: 5px;
      }
      
      .alarm-type-icon {
        font-size: 18px;
        margin-right: 10px;
        display: flex;
        align-items: flex-start;
        padding-top: 2px;
      }
      
      .alarm-content {
        flex: 1;
        
        .alarm-type {
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 4px;
        }
        
        .alarm-location {
          font-size: 13px;
          color: #606266;
          margin-bottom: 4px;
        }
        
        .alarm-description {
          font-size: 12px;
          color: #909399;
        }
      }
      
      .alarm-time {
        font-size: 12px;
        color: #909399;
        min-width: 60px;
        text-align: right;
        display: flex;
        align-items: flex-start;
      }
    }
  }
  
  .no-alarm {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #909399;
    
    i {
      font-size: 24px;
      margin-bottom: 5px;
      color: #67C23A;
    }
    
    span {
      font-size: 14px;
    }
  }
}
</style>
